<template>
    <van-tree-select
    :items="items"
    :main-active-index.sync="activeIndex"
    @navclick="changeShowType"
    @itemclick="changeShowContent"
    >
        <template slot="content">
            <van-image v-if="activeIndex === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
            <van-image v-if="activeIndex === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
        </template>
    </van-tree-select>
</template>

<script>
export default {
    name: "goodsType",
    data() {
        return {
            activeIndex: 0,
            items: [
                { 
                    text: '分组 1',
                    // children: [{
                    //     text:'Item1',
                    //     id: 1
                    // }]
                },
                { 
                    text: '分组 2',
                    children: [{
                        text:'Item2',
                        id: 2
                    }]
                }
            ]
        }
    },
    methods: {
        // 点击左侧导航时触发
        changeShowType: function (activeIndex) {
            // @navclick 返回被点击的导航索引
            console.log(activeIndex)
            let _this = this
            // change item_index
            _this.activeIndex = activeIndex
        },
        // 点击右侧选项时触发
        changeShowContent: function (data) {
            // 返回参数为该点击项数据
            console.log(data)
        }
    }
};
</script>